<template>
	<h2>插槽和简单的组件传参,传送门</h2>
	<br>
	<view id='tlt'>
		<b>这个是Dynamic2</b> <br />
		<b>子传给父的值：{{Fn}}</b>
		<br>
		<b>跟子组件双向绑定的{{Model}}</b>
	</view>
	<button @click="change">传值给子组件</button>
	<hr />
	<children2 v-model="Model" :str='str' :show='show' @fn='fn'>
		<template #top >
			<!-- v-slot:top -->
			具名插槽top
		</template>
		<template v-slot="{res}">
			{{res.title}}
		</template>
		<!-- 作用域插槽的简写   应用场景：当父组件需要用到子组件里的数据时，通过插槽传递数据。
		<template #default="{ res }"> {{res.title}} </template> -->
	</children2>



</template>

<script setup>
	import {
		ref
	} from 'vue'
	name: 'Dynamic2'
	let str = ref('')
	let Fn = ref('')
	let show = ref(false)
	let Model=ref(111111)
	function change() {
		str.value = '父传给子的值'
		show.value = !show.value
	}

	function fn(val) {
		Fn.value = val
	}
	
	
</script>

<style>
</style>
